<template>
	<div class="tag_manage">
		<!-- <RouteTitle isBack /> -->
		<div style="display: flex; align-items: center;">
			<a-button style="border-radius: 4px;" @click="goBack">返回</a-button>
			<h1 style="margin: 5px 0 0 10px;">标签管理</h1>

		</div>


		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane v-for="(item, index) in tabList" :key="item.key" :tab="item.name">
				<component v-if="activeKey == item.key" :is="item.component" />
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script>
import {
	useRoute,
	useRouter
} from "vue-router";
import {
	defineComponent,
	reactive,
	toRefs,
	computed,
	createVNode,
	watch,
} from "vue";
import {
	Modal,
	message
} from "ant-design-vue";
import request from "@/common/utils/request";
import LabelManagement from './components/LabelManagement/index.vue';
import LabelGrouping from './components/LabelGrouping/index.vue';
export default defineComponent({
	name: "Index",
	components: {
		LabelManagement,
		LabelGrouping
	},
	setup() {
		const router = useRouter();
		const route = useRoute();
		const state = reactive({
			activeKey: 1,
			tabList: [{
				key: 1,
				name: '标签管理',
				component: 'LabelManagement'
			}, {
				key: 2,
				name: '标签分组',
				component: 'LabelGrouping'
			}]
		})


		const goBack = () => {
			if (Object.keys(route.query).length > 0 && route.query.id) {
				router.push({
					name: "ComposeMaterial",
					query: { id: route.query.id },
				});
			} else if (route.query.activeKey) {
				router.push({
					name: "MaterialList",
					query: {
						activeKey: route.query?.activeKey,
						// selectedKeys: route.query?.selectedKeys
					},
				});
			} else {
				router.go(-1);
			}

		}

		return {
			...toRefs(state),
			goBack
		};
	},
});
</script>

<style lang="less" scoped>
.tag_manage {
	padding: 20px;
	background-color: #fff;
}
</style>